import React from 'react'
import { useState, useEffect, useImperativeHandle, forwardRef } from 'react'
import styles from './index.module.less'
import './index.less'

function Slider(props: any, ref: any) {
  const [showSliderContainer, setShowSliderContainer] = useState(false)

  useEffect(() => {
    /* eslint-disable */
    // @ts-ignore
    window.TAL_UC.configNVC({
      renderToEle: '#captcha',
      isH5: true
    })
  }, [])

  useImperativeHandle(ref,() => {
    return {
      sliderConfirm,
      setShowSliderContainer
    }
  })

  const sliderConfirm = (functionName: string, functionParams: any) =>{
    setShowSliderContainer(true) // 展示滑块
    const param = {
      slideCallback: functionName, // 前端滑动验证通过时执行函数名, 滑动验证通过时执行方法名，（即触发滑块的原方法，例如：登录（loginSms），获取验证码（sendSMSCodeLogin），校验旧手机（checkPhone）等等等等）
      slideParams: functionParams, // 前端滑动验证通过时执行函数的参数, 前端滑动验证通过时执行方法名的参数（例如手机号，验证码,success和fail等等）
      failCallback: () => {
        console.log('意外失败！')
      } // 后端二次滑块验证接口调用失败成功后的回调
    }
    /* eslint-disable */
    // @ts-ignore
    window.TAL_UC.showSlide(param) // 展示滑块
  }

  const changeSliderConfirm = (bool: boolean | ((prevState: boolean) => boolean)) => {
    setShowSliderContainer(bool)
  }

  return (
    <div className={`${
      showSliderContainer ? styles['slider-confirm'] : styles['visible-false']
    }`}>
      <div className={styles['slider-panel']}>
        <div className={styles['slider-box']}>
          <span className={styles['close-btn']} onClick={() => {changeSliderConfirm(false)}} />
          <p className={styles['title']}>帐号安全验证</p>
          <div className={styles['captcha_box']}>
            <div id="captcha" />
          </div>
        </div>
      </div>
    </div>
  )
}
const SliderConfirm = forwardRef(Slider)
export default SliderConfirm